<template>
	<!--index.wxml-->
	<view class="container">
	  <view class='info'>
	    <view class="userinfo">
	      <text @click="lilv" class='rate'>利率表 ></text>
	    </view>
	    <view class='nav'>
	      <text @click="navChange" data-flag='0' class='text' :class='navFlag == 0 ? "active" : ""'>等额本息</text>
	      <text @click="navChange" data-flag='1' class='text' :class='navFlag == 1 ? "active" : ""'>等额本金</text>
	    </view>
	    <view class='result'>
	      <view class='result-t'>
	        <view>
	          <text class='text'>每月月供参考(单位：元)</text>
	          <text class='value'>{{result.payment}}</text>
	        </view>
	        <view v-if="navFlag == 1 ? true : false">
	          <text class='text'>每月递减(单位：元)</text>
	          <text class='value'>{{result.decline}}</text>
	        </view>
	      </view>
	      <view class='result-b'>
	        <view>
	          <text class='text'>支付利息(单位：元)</text>
	          <text class='value'>{{result.interest}}</text>
	        </view>
	        <view>
	          <text class='text'>还款总额(单位：元)</text>
	          <text class='value'>{{result.total}}</text>
	        </view>
	      </view>
	    </view>
	  </view>
	  <view class='detail'>
		  <div  @click="linkDetail">{{detail.text}}</div>
	  </view>
	  <view class='calculator-form'>
	    <view>
	      <text class='text'>贷款类型</text>
	      <picker @change="bindLoanChange" :value="loanIndex" :range="loanArray">
	        <view class="picker">
	          {{loanArray[loanIndex]}}
	        </view>
	      </picker>
	    </view>
	    <block v-if="loanIndex == 0 || loanIndex == 2">
	      <view>
	        <text class='text'>商贷金额(万元)</text>
	        <input type='number' @input="commercialInput" :value="money.money_c" maxlength="5" placeholder="输入金额"></input>
	      </view>
	    </block>
	    <block v-if="loanIndex == 1 || loanIndex == 2">
	      <view>
	        <text class='text'>公积金贷金额(万元)</text>
	        <input type='number' @input="providentFundInput" :value="money.money_p" maxlength="5" placeholder="输入金额"></input>
	      </view>
	    </block>
	    <view>
	      <text class='text'>期限(年)</text>
	      <input type='number' @input="yearInput" :value="year" maxlength="2" placeholder="输入年限"></input>
	    </view>
	    <block v-if="loanIndex == 0 || loanIndex == 2">
	      <view>
	        <text class='text'>商贷利率(%)</text>
	        <picker @change="commercialChange" value="0" :range="rateArray" :range-key="'name'">
	          <view class="picker">
	            {{loan.commercial}}
	          </view>
	        </picker>
	      </view>
	    </block>
	    <block v-if="loanIndex == 1 || loanIndex == 2">
	      <view>
	        <text class='text'>公积金贷利率(%)</text>
	        <picker @change="providentFundChange" value="0" :range="rateArray1" :range-key="'name'">
	          <view class="picker">
	            {{loan.providentFund}}
	          </view>
	        </picker>
	      </view>
	    </block>
	  </view>
	  <button type="warn" size="default" @click="submit" :disabled='loanIndex == 0 && money.money_c == "" || loanIndex == 1 && money.money_p == "" || year == "" || loanIndex == 2 && money.money_c == "" && money.money_p == ""'>计 算</button>
	  <view class='calculator-info'>
	    <view>
	      <text>* </text>以上为央行公布的最新利率</view>
	    <view>
	      <text>* </text>此结果仅供参考，实际费用以当地缴费为准</view>
	  </view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				userInfo: {},
				//nav标志
				navFlag: 0,
				loanArray: ['商业贷款', '公积金贷款', '组合贷款'],
				loanIndex: 0,
				rateArray: [
					{
				  id: 1, name: '基准利率'
				}, {
				  id: 0.7, name: '7折利率'
				}, {
				  id: 0.8, name: '8折利率'
				}, {
				  id: 0.83, name: '8.3折利率'
				}, {
				  id: 0.85, name: '8.5折利率'
				}, {
				  id: 0.88, name: '8.8折利率'
				}, {
				  id: 0.9, name: '9折利率'
				}, {
				  id: 0.95, name: '9.5折利率'
				}, {
				  id: 1.05, name: '1.05倍利率'
				}, {
				  id: 1.1, name: '1.1倍利率'
				}, {
				  id: 1.2, name: '1.2倍利率'
				}, {
				  id: 1.3, name: '1.3倍利率'
				}],
				rateArray1: [{
				  id: 1, name: '基准利率'
				}, {
				  id: 1.1, name: '1.1倍利率'
				}],
				//商贷最新基准利率
				commercial_loan: 4.75,
				//公积金贷最新基准利率
				provident_fund_loan: 2.75,
				loan: {
				  //商贷利率值            
				  commercial: 4.75,
				  //公积金贷利率值
				  providentFund: 2.75,
				},
				money: {
				  //商贷金额
				  money_c: "",
				  //公积金贷金额
				  money_p: "",
				},
				//年限
				year: 5,
				result: {
				  payment: "0.00",
				  decline: "0.00",
				  interest: "0.00",
				  total: "0.00",
				},
				detail: {
				  url: "",
				  text: "还款详情",
				  style: ""
				}
			}
		},
		onReady(){
			// this.getStyle();
		},
		onLoad(){
			
		},
		onShareAppMessage(res) { //发送给朋友
			return {
				title: '逸居盛京',
				path: '/pages/home/index',
				imageUrl: "",
			}
		},
		onShareTimeline(res) { //分享到朋友圈
			return {
				title: '逸居盛京',
				path: '/pages/home/index',
				imageUrl: "",
			}
		},
		methods: {
			linkDetail(){
				
				// console.log(this.detail.url)
				if(this.detail.url){
					console.log(this.detail.url)
					uni.navigateTo({
						url: this.detail.url
					})
				}else{
					console.log(3)
				}
				
			},
			lilv(){
				uni.navigateTo({
					url: '/pages/number/lilv'
				})
			},
			submit: function () {
			    var that = this;
			    var result = {};
			    var detail = {};
			    //等额本息
			    if (that.navFlag == 0) {
			      //商贷
			      if (that.loanIndex == 0) {
			        result = that.getResult(that.year, that.loan.commercial, that.money.money_c);
			      }
			      //公积金贷
			      else if (that.loanIndex == 1) {
			        result = that.getResult(that.year, that.loan.providentFund, that.money.money_p);
			      }
			      //组合贷
			      else {
			        var result1, result2;
			        result1 = result2 = {
			          payment: 0,
			          total: 0,
			          interest: 0
			        }
			        if (that.money.money_c != "") {
			          result1 = that.getResult(that.year, that.loan.commercial, that.money.money_c);
			        }
			        if (that.money.money_p != "") {
			          result2 = that.getResult(that.year, that.loan.providentFund, that.money.money_p);
			        }
			        result = {
			          payment: result1.payment + result2.payment,
			          total: result1.total + result2.total,
			          interest: result1.interest + result2.interest
			        }
			      }
		
				  this.result.payment = result.payment.toFixed(2);
				  this.result.interest = result.interest.toFixed(2);
				  this.result.total = result.total.toFixed(2);
			    }else {
			      //商贷、公积金贷
			      if (that.loanIndex == 0) {
			        result = that.getResult1(that.year, that.loan.commercial, that.money.money_c);
			      }
			      //公积金贷
			      else if (that.loanIndex == 1) {
			        result = that.getResult1(that.year, that.loan.providentFund, that.money.money_p);
			      }
			      //组合贷
			      else {
			        var result1, result2;
			        result1 = result2 = {
			          payment: 0,
			          total: 0,
			          interest: 0
			        }
			        if (that.money.money_c != "") {
			          result1 = that.getResult1(that.year, that.loan.commercial, that.money.money_c);
			        }
			        if (that.money.money_p != "") {
			          result2 = that.getResult1(that.year, that.loan.providentFund, that.money.money_p);
			        }
			        result = {
			          payment: result1.payment + result2.payment,
			          decline: result1.decline + result2.decline,
			          total: result1.total + result2.total,
			          interest: result1.interest + result2.interest
			        }
			      }
				  
				  this.result.payment = result.payment.toFixed(2);
				  this.result.decline = result.decline.toFixed(2);
				  this.result.interest = result.interest.toFixed(2);
				  this.result.total = result.total.toFixed(2);
			    }
			    //商贷
			    if (that.loanIndex == 0) {
			      detail = {
			        text: "商贷还款详情 >>",
			        url: "/pages/number/detail?flag=" + that.navFlag +
			        "&year=" + that.year +
			        "&money_c=" + that.money.money_c +
			        "&commercial=" + that.loan.commercial,
			        style: "active"
			      }
			    }
			    //公积金贷
			    else if (that.loanIndex == 1) {
			      detail = {
			        text: "公积金贷还款详情 >>",
			        url: "/pages/number/detail?flag=" + that.navFlag +
			        "&year=" + that.year +
			        "&money_p=" + that.money.money_p +
			        "&providentFund=" + that.loan.providentFund,
			        style: "active"
			      }
			    }
			    //组合贷
			    else {
			      detail = {
			        text: "组合贷款还款详情 >>",
			        url: "/pages/number//detail?flag=" + that.navFlag +
			        "&year=" + that.year +
			        "&money_c=" + that.money.money_c +
			        "&commercial=" + that.loan.commercial +
			        "&money_p=" + that.money.money_p +
			        "&providentFund=" + that.loan.providentFund,
			        style: "active"
			      }
			    }
				
				this.detail = detail
			
		    },
			  //nav切换
			navChange: function (e) {
				this.navFlag = e.target.dataset.flag;
				this.loanIndex = this.loanIndex;
				this.year= 5;
				this.commercial_loan= 4.75;
				this.provident_fund_loan= 2.75;
				this.loan= {
				  commercial: 4.75,
				  providentFund: 2.75,
				};
				this.money= {
				  money_c: "",
				  money_p: "",
				};
				this.result= {
				  payment: "0.00",
				  decline: "0.00",
				  interest: "0.00",
				  total: "0.00",
				};
				this.detail= {
				  url: "",
				  text: "还款详情",
				  style: ""
				};
			},
			bindLoanChange: function (e) {
			    var that = this;
			    var value = e.detail.value;
				console.log(value)
			    if (value == 0) {    //商贷
				  this.loan.commercial = 4.75
			    } else if (value == 1) {   //公积金贷
					this.loan.providentFund = 2.75
			    } else {                          //组合贷款
			      this.loan = {
			        commercial: 4.75,
			        providentFund: 2.75,
			      }
			    }
				
				this.loanIndex = value;
			    this.year=  5;
			    this.commercial_loan=  4.75;
			    this.provident_fund_loan=  2.75;
			    this.money=  {
			        money_c: "",
			        money_p: "",
			      };
			    this.result=  {
			        payment: "0.00",
			        decline: "0.00",
			        interest: "0.00",
			        total: "0.00",
			      };
			    this.detail= {
			        url: "",
			        text: "还款详情",
			        style: ""
			      }
			    
			},
			commercialChange: function (e) {
			    var that = this;
			    var rate = that.rateArray[e.detail.value].id * that.commercial_loan;
			    var key = "loan.commercial";
				this.loan.commercial = rate.toFixed(2)
			    
			},
			providentFundChange: function (e) {
			    var that = this;
			    var rate = that.rateArray1[e.detail.value].id * that.provident_fund_loan;
				this.loan.providentFund = rate.toFixed(2)
			},
			commercialInput: function (e) {
				this.money.money_c = e.detail.value,
				this.detail= {
				  url: "",
				  text: "还款详情",
				  style: ""
				}
			},
			providentFundInput: function (e) {
			    var that = this;
				that.money.money_p = e.detail.value;
				that.detail= {
				  url: "",
				  text: "还款详情",
				  style: ""
				}
			    
			},
			yearInput: function (e) {
			    var that = this;
			    var loanIndex = that.loanIndex,
			      year = e.detail.value;
			    var rate, commercial_loan, provident_fund_loan;
			
			    if (loanIndex == 0) {
			      rate = year > 5 && 4.90 || year > 1 && 4.75 || 4.35;
				  this.year= year;
				  this.commercial_loan=  rate;
				  this.loan.commercial= rate;
				  this.detail=  {
				    url: "",
				    text: "还款详情",
				    style: ""
				  }
			    } else if (loanIndex == 1) {
			      rate = year > 5 && 3.25 || 2.75;
				  this.year= year;
				  this.provident_fund_loan=  rate;
				  this.loan.providentFund= rate;
				  this.detail=  {
				    url: "",
				    text: "还款详情",
				    style: ""
				  }
			    } else {
			      commercial_loan = year > 5 && 4.90 || 4.75;
			      provident_fund_loan = year > 5 && 3.25 || 2.75;
			      var key = "loan.commercial";
			      var key1 = "loan.providentFund";
				  
				  this.year= year;
				  this.commercial_loan=  commercial_loan;
				  this.provident_fund_loan=  provident_fund_loan;
				  this.loan.commercial= commercial_loan;
				  this.loan.providentFund= provident_fund_loan;
				  this.detail=  {
				    url: "",
				    text: "还款详情",
				    style: ""
				  }
			    }
			},
			  //等额本息公式
			getResult: function (year, rate, money) {
			    //还款月数
			    var months = year * 12;
			    //月利率
			    var month_rate = rate / 100 / 12;
			    //月供
			    var payment = money * 10000 * month_rate * Math.pow(1 + month_rate, months) / (Math.pow(1 + month_rate, months) - 1);
			    var total = payment * months;
			    //总利息
			    var interest = total - money * 10000;
			    return {
			      payment: payment,
			      total: total,
			      interest: interest
			    }
			},
			  //等额本金公式
			getResult1: function (year, rate, money) {
			    //贷款本金
			    var p = money * 10000;
			    //还款月数
			    var months = year * 12;
			    //月利率
			    var month_rate = rate / 100 / 12;
			    //月供
			    var payment = (p / months) + p * month_rate;
			    //月供递减
			    var decline = p / months * month_rate;
			    //总利息
			    var interest = ((p / months + p * month_rate) + p / months * (1 + month_rate)) / 2 * months - p;
			    //还款总额
			    var total = interest + p;
			    return {
			      payment: payment,
			      decline: decline,
			      total: total,
			      interest: interest
			    }
			},
		}
	}
</script>
 
<style>
 /**index.wxss**/
 
 button {
   margin: 20rpx 3%;
   width: 94%;
 }
 
 .info {
   display: flex;
   flex-direction: column;
   width: 100%;
   background-image: linear-gradient(135deg, #F44336 10%, #FF9800 100%);
   padding-bottom: 30rpx;
 }
 
 .userinfo {
   display: flex;
   width: 100vw;
   height: 80rpx;
   align-items: center;
   padding-left: 50rpx;
   box-sizing: border-box;
 }
 
 .userinfo-avatar {
   width: 128rpx;
   height: 128rpx;
   margin: 20rpx;
   border-radius: 50%;
 }
 
 .userinfo-nickname {
   color: #aaa;
 }
 
 .rate {
   flex: 1;
   text-align: right;
   padding-right: 50rpx;
   color: #fff;
 }
 
 .nav {
   display: flex;
   justify-content: center;
 }
 
 .nav .text {
   display: inline-block;
   width: 160px;
   height:40px;
   font-size: 18px;
   border: 1rpx solid #fff;
   text-align: center;
   line-height: 40px;
   color: #fff;
 }
 
 .nav .text:first-child {
   border-bottom-left-radius: 10rpx;
   border-top-left-radius: 10rpx;
   border-right: 0;
 }
 
 .nav .text:last-child {
   border-bottom-right-radius: 10rpx;
   border-top-right-radius: 10rpx;
 }
 
 .nav .text.active {
   color: #ff9800;
   background: #fff;
 }
 
 .result {
   display: flex;
   flex-direction: column;
   color: #fff;
 }
 
 .result-t, .result-b {
   display: flex;
 }
 
 .result .text {
   font-size: 12px;
   line-height: 40rpx;
 }
 
 .result .value {
   font-size: 54rpx;
 }
 
 .result-t > view, .result-b > view {
   display: flex;
   flex-basis: 50%;
   flex-direction: column;
   padding: 30rpx 40rpx;
   padding-bottom: 0;
 }
 
 .result-b .value {
   font-size: 40rpx;
 }
 
 .calculator-form {
   width: 100%;
   box-sizing: border-box;
   background: #fff;
 }
 
 .calculator-form > view {
   display: flex;
   line-height: 100rpx;
   border-bottom: 1rpx solid #f8f8ff;
   padding: 0 50rpx;
   font-size: 32rpx;
   justify-content: space-between;
 }
 
 .calculator-form .text {
   color: #888;
 }
 
 .calculator-form .picker::after {
   content: " ›";
   color: #888;
 }
 
 .calculator-form input {
   width: 200rpx;
   height: 100rpx;
   text-align: right;
   margin-right: 20rpx;
 }
 
 .calculator-info {
   width: 100%;
   font-size: 26rpx;
   color: #999;
   text-align: left;
   padding-left: 50rpx;
   line-height: 40rpx;
   box-sizing: border-box;
   margin-bottom: 40rpx;
 }
 
 .calculator-info text {
   color: #e80505;
 }
 
 .detail {
   font-size: 14px;
   color: #aaa;
   text-align: center;
   line-height:30px;
   height: 30px;
 }
 
 .detail .active {
   color: #f8d800;
 }

</style>